<template>
	<div>
		<div class='page-header' v-if="orderDetail.order_state == 20">
			<span class='title'>订单明细</span>
			<img class='server-avatar' src='https://yami.yamichefs.cn/yaminew/app/admin/yami/Uploads/service/5bc05b7346d45.png' bindtap="showChat" />
		</div>
		<chat-type class="chat-type" v-if="orderDetail.order_state == 20"></chat-type>
		<div class='custom-conatiner'>
			<div class='goods-total' v-for="(item,index) in orderDetail.goods_list" :key="item.order_id">
				<div class='goods-content'>
					<span class='title'>{{item.ck_name}}</span>
					<span class='sub-title'>{{item.ck_title}}</span>
					<span class='sub-title'>{{item.ck_addr_name}}</span>
				</div>
				<img class='goods-thumb' :src='item.ck_avatar' />
			</div>
			<div class='panel-container'>
				<div class='panel-header'>
					<span class='title'>定制详情</span>
				</div>
				<div class='panel-body'>
					<div class='item'>
						<div class='title'>宴会人数</div>
						<div class='title'>{{orderDetail.order_goods_info.item_num}}人</div>
					</div>
					<div class='item'>
						<div class='title'>人均单价</div>
						<div class='title'>{{orderDetail.order_goods_info.item_price}}元</div>
					</div>
					<div class='item' v-for="(item,index) in orderDetail.other_charge_list" :key="item.orther_id">
						<div class='title'>{{item.service_name}}</div>
						<div class='title'>{{item.service_orther_price}}元</div>
					</div>

				</div>
			</div>
			<div class='panel-container'>
				<div class='panel-header'>
					<span class='title'>定制地点</span>
				</div>

				<div class='panel-body'>
					<div class='item'>
						<div class='title'>{{orderDetail.address.reciver_address}}</div>
					</div>
					<div class='item'>
						<div class='title'>{{orderDetail.address.reciver_region}}</div>
					</div>
				</div>
			</div>
			<div class='panel-container'>
				<div class='panel-header'>
					<span class='title'>定制时间</span>
					<span class='price'>{{orderDetail.attend_time}}</span>
				</div>
			</div>
			<div class='panel-container'>
				<div class='panel-header'>
					<span class='title'>总价</span>
					<span class='price'>{{orderDetail.order_amount}}元</span>
				</div>
				<div class='panel-body'>
					<div class='item'>
						<div class='title'>预付款</div>
						<div class='title'>{{orderDetail.deposit}}元</div>
					</div>
				</div>
			</div>
			<div class='panel-container' v-if="orderDetail.pay_log.length > 0">
				<div class='panel-header'>
					<span class='title'>已支付总额</span>
					<span class='price'>{{orderDetail.payedMoney}}元</span>
				</div>
				<div class='panel-body'>
					<div class='item' v-for="(item,index) in orderDetail.pay_log" :key="item.log_id">
						<div class='title'>{{item.pay_project}}</div>
						<div class='flex-grow'></div>
						<div class='title'>
							<span></span>{{item.pay_code}}</text>
						</div>
						<div class='title'>{{item.pay_money}}元</div>
					</div>
				</div>
			</div>

			<div class='panel-container' v-if="orderDetail.topayMoney != 0">
				<div class='panel-header'>
					<span class='title'>待支付</span>
				</div>
				<div class='panel-body'>
					<div class='item'>
						<div class='title'>{{orderDetail.project}}</div>
						<div class='flex-grow'></div>
						<div class='title'>{{orderDetail.topayMoney}}元</div>
					</div>
				</div>
			</div>
			<div v-if='orderDetail.order_label != 1 && orderDetail.pay_log.length != 0'>
				<router-link class='apply-btn' v-if="orderDetail.refund_state == 0 " to="/applyRefund">
					<span>申请退款</span>
				</router-link>
				<div class='apply-btn' v-else-if="orderDetail.refund_state == 3 ">
					<span>申请中</span>
				</div>
				<div class='apply-btn' v-else>
					<span>已退款</span>
				</div>
			</div>
			<div class='pay-methods-conatiner' v-if="orderDetail.topayMoney != 0">
				<div class='pay-method'>
					<img src='../../../../../static/img/purse.svg' class='icon-wallet' />
					<span>钱包余额{{orderDetail.available_predeposit}}元</span>
					<div class='flex-grow'></div>
					<mt-switch v-model="isUseWallet"></mt-switch>
				</div>
				<div class='pay-method'>
					<img src='../../../../../static/img/weixinpay.svg' class='icon-wallet' />
					<span>微信支付</span>
					<div class='flex-grow'></div>
					<div @click='choosePayMethod("weixin")'>
						<img src="../../../../../static/img/select/red.svg" v-if="payMethod == 'weixin'" />
						<img src="../../../../../static/img/select/grey.svg" v-else/>
					</div>
				</div>
				<div class='pay-method'>
					<img src='../../../../../static/img/duigong.svg' class='icon-wallet' />
					<span>对公转账</span>
					<div class='flex-grow'></div>
					<div @click='choosePayMethod("duigong")'>
						<img src="../../../../../static/img/select/red.svg" v-if="payMethod == 'duigong'" />
						<img src="../../../../../static/img/select/grey.svg" v-else/>
					</div>
				</div>
				<div class='pay-method'>
					<img src='../../../../../static/img/xianjin.svg' class='icon-wallet' />
					<span>现金结算</span>
					<div class='flex-grow'></div>
					<div @click='choosePayMethod("xianjin")'>
						<img src="../../../../../static/img/select/red.svg" v-if="payMethod == 'xianjin'" />
						<img src="../../../../../static/img/select/grey.svg" v-else/>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions, mapMutations } from 'vuex';
	import server from '@/server/api';
	import chatType from '@/components/chat-type/chat-type'
	export default {
		data() {
			return {
				isUseWallet: false,
				payMethod: 'weixin'
			}
		},
		computed: {
			...mapState(['orderDetail']),
			...mapGetters(['formatDate']),
		},
		components: {
			"chat-type": chatType,
		},
		mounted() {},
		created() {},
		methods: {
			...mapActions(['getOrderDetail', "getOrderDetailOther"]),
			choosePayMethod(payType) {
				if(this.payMethod != payType) {
					this.payMethod = payType
				}
			}
		},
		watch: {
			isUseWallet(newVal, oldVal) {


				this.$emit("useWalletPay", newVal)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-header {
		display: flex;
		justify-content: space-between;
		padding: 0 40px 32px;
		background-color: #fff;
		box-shadow: 0 72px 200px 0 rgba(0, 0, 0, 0.08);
		.title {
			font-size: 48px;
			color: #000;
		}
		.server-avatar {
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}
	}
	
	.custom-conatiner {
		padding: 0 40px;
		.goods-total {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 30px 0;
			border-bottom: 2px solid #dcdcdc;
			.goods-content {
				display: flex;
				flex-direction: column;
				.title {
					font-size: 40px;
					color: #4a4a4a;
					margin-bottom: 20px;
				}
				.sub-title {
					font-size: 28px;
					color: #67666B;
				}
			}
			.goods-thumb {
				width: 170px;
				height: 240px;
				border-radius: 8px;
			}
		}
	}
	
	.panel-container {
		padding: 30px 0;
		border-bottom: 2px solid #dcdcdc;
		.panel-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 48px;
			margin-bottom: 18px;
			.title {
				font-size: 36px;
				color: #4a4a4a;
			}
			.price {
				font-size: 36px;
				color: #67666B;
			}
		}
		.panel-body {
			.item {
				display: flex;
				justify-content: space-between;
				height: 48px;
				margin-bottom: 16px;
				.title {
					font-size: 30px;
					color: #8A8A8A;
				}
			}
		}
	}
	
	.pay-methods-conatiner {
		.pay-method {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			height: 100px;
			.icon-wallet {
				height: 44px;
				width: 44px;
				margin-right: 30px;
			}
			span {
				font-size: 32px;
			}
			.flex-grow {
				flex: 2;
				height: 1px;
			}
			.choosePayMethod {}
		}
	}
	
	.chat-type {
		padding: 0 40px;
		max-height: 65vh;
	}
	
	.apply-btn {
		display: block;
		height: 92px;
		margin-top: 50px;
		margin-bottom: 60px;
		border: 2px solid #e5e5e4;
		border-radius: 8px;
		font-size: 36px;
		color: #4a4a4a;
		text-align: center;
		line-height: 92px;
	}
</style>